html,body{
    height:100%;
}
body{
    perspective:500px;
    background:#000;
}
.conter{
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
}
.box{
// border:1px solid #fff;
    height:500px;
    width:500px;
    transform-style:preserve-3d;
    transform:rotatex(65deg);
}
.ball{
    height:200px;
    width:200px;
    animation:rotate 30s linear infinite;
//  animation-iteration-count:infinite;
    transform-style:preserve-3d;
}
.ball .borderline{
    border:1px solid #ff0;
    height:100%;
    width:100%;
    border-radius:50%;
}
.ball .borderline:nth-child(1){
    transform:rotatey(0deg);
}
.ball .borderline:nth-child(2){
    transform:rotatey(30deg);
}
.ball .borderline:nth-child(3){
    transform:rotatey(60deg);
}
.ball .borderline:nth-child(4){
    transform:rotatey(90deg);
}
.ball .borderline:nth-child(5){
    transform:rotatey(120deg);
}
.ball .borderline:nth-child(6){
    transform:rotatey(150deg);
}

.ball .borderline:nth-child(7){
    transform:rotatex(0deg);
}
.ball .borderline:nth-child(8){
    transform:rotatex(30deg);
}
.ball .borderline:nth-child(9){
    transform:rotatex(60deg);
}
.ball .borderline:nth-child(10){
    transform:rotatex(90deg);
}
.ball .borderline:nth-child(11){
    transform:rotatex(120deg);
}
.ball .borderline:nth-child(12){
    transform:rotatex(150deg);
}


.sun .borderline{
    box-shadow:0px 0px 20px 5px #0000ff;
}


.ball_path_1{
    height:300px;
    width:300px;
    border:2px solid #ccc;
    border-radius:50%;
    transform-style:preserve-3d;
    animation:rotatez 10s linear infinite;
// animation-iteration-count:infinite;
}
.ball_path_1 .ball{
    width:30px;
    height:30px;
    left:94%;
}
.ball_path_1 .ball .borderline{
    border:1px solid #0ff;
}


.ball_path_2{
    height:450px;
    width:450px;
    border:3px solid #ff1493;
    border-radius:50%;
    transform-style:preserve-3d;
    animation:rotatex 20s linear infinite;
}
.ball_path_2 .ball{
    width:60px;
    height:60px;
    left:93%;
}
.ball_path_2 .ball .borderline{
    border:1px solid #85ff00;
}


.ball_path_3{
    height:600px;
    width:600px;
    margin-left:-50px;
    margin-top:-50px;
    border:3px solid #ccc;
    border-radius:50%;
    transform-style:preserve-3d;
    animation:rotatey 50s linear infinite;
}
.ball_path_3 .ball{
    width:90px;
    height:90px;
    left:93%;
}
.ball_path_3 .ball .borderline{
    border:1px solid #0000ff;
}


@keyframes rotate{
    0%{transform:rotatey(0deg) rotatex(0deg);}
    100%{transform:rotatey(360deg) rotatex(360deg);}
}
@keyframes rotatex{
    from{transform:rotatez(0deg)}
    to{transform:rotatez(360deg)}
}
@keyframes rotatey{
    from{transform:rotatez(0deg)}
    to{transform:rotatez(360deg)}
}
@keyframes rotatez{
    from{transform:rotatez(0deg)}
    to{transform:rotatez(360deg)}
}